<template>
  <div>
    <el-container class='subWidth'>
      <el-header class='subheader'
                 style="height: 48px; background-color: white; margin: 2px; padding: 2px; border-radius: 5px">
        <el-form :inline="true" class="demo-form-inline" label-position="left" label-width="80px">
          <el-form-item label="订单号">
            <el-input v-model="searchQuery.code" @keyup.enter="fetchOrders"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchQuery.status" placeholder="请选择">
              <el-option label="待付款" value="0"></el-option>
              <el-option label="待发货" value="1"></el-option>
              <el-option label="待收货" value="2"></el-option>
              <el-option label="已完成" value="3"></el-option>
              <el-option label="已取消" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchOrders">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main id='tableContent'>
        <el-table :data="orders" style="width: 100%" show-header="true">
          <el-table-column prop="id" label="编号" width="45" align="center"></el-table-column>
          <el-table-column prop="userId" label="用户ID" width="80" align="center"></el-table-column>
          <el-table-column prop="itemId" label="商品ID" width="80" align="center"></el-table-column>
          <el-table-column prop="code" label="订单号" width="120" align="center"></el-table-column>
          <el-table-column prop="addTime" label="下单时间" align="center" format="yyyy-MM-dd"></el-table-column>
          <el-table-column prop="total" label="总价" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag :type="statusTagType(scope.row.status)">{{ statusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页 -->
      <!--      <MyPagination :total="total" />-->
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import "@/assets/add.css"
// import MyPagination from "@/components/MyPagination.vue";

export default {
  components: {
    // MyPagination
  },
  data() {
    return {
      searchQuery: {
        code: '',
        status: ''
      },
      orders: [],
      // currentPage: 1, // 当前页码
      // pageSize: 10, // 每页显示的条目数
      // total: 0, // 总条目数
    };
  },
  methods: {
    /*发货*/
    handleShip(index, order) {
      axios.put(`/itemOrder/ship/${order.id}`).then(response => {
        console.log('Response from server:', response.data); // 查看完整的响应数据
        // 根据后端返回的数据结构，检查 flag 是否为 true
        if (response.data.flag === true) { // 使用 flag 而不是 success
          this.orders[index].status = '2'; // 更新本地状态
          this.$message.success('订单已发货');
        } else {
          // 如果 flag 不是 true，显示失败消息
          this.$message.error('发货失败：' + (response.data.message || '未知错误'));
        }
      }).catch(error => {
        console.error("Error shipping order:", error);
        // 如果发生网络错误或请求失败，显示更详细的错误信息
        this.$message.error('发货失败：' + (error.response && error.response.data ? error.response.data.message : '网络请求失败'));
      });
    },
    fetchOrders() {
      const params = {
        code: this.searchQuery.code || undefined, // 如果为空字符串，则不传递该参数
        status: this.searchQuery.status || undefined, // 如果为空字符串，则不传递该参数
        // page: this.currentPage,
        // size: this.pageSize
      };
      axios.get("/itemOrder/find", {params}).then(response => {
        console.log(response.data)
        this.orders = response.data;
        // this.total = response.data.total;
      }).catch(error => {
        console.error("Error fetching orders:", error);
      });
    },
    resetSearch() {
      this.searchQuery.code = '';
      this.searchQuery.status = '';
      // this.currentPage = 1; // 重置页码
      this.fetchOrders(); // 重置后重新获取所有订单列表
    },

    statusTagType(status) {
      switch (status) {
        case '0':
          return 'warning'; // 待付款
        case '1':
          return 'danger'; // 待发货
        case '2':
          return 'success'; // 已发货
        case '3':
          return 'primary'; // 已完成
        case '4':
          return 'info'; // 已取消
        default:
          return 'default';
      }
    },
    statusText(status) {
      switch (status) {
        case '0':
          return '待付款';
        case '1':
          return '待发货';
        case '2':
          return '待收货';
        case '3':
          return '已完成';
        case '4':
          return '已取消';
        default:
          return '未知状态';
      }
    },
  },
  mounted() {
    this.fetchOrders(); // 页面加载时获取订单列表
  }
};
</script>

<style scoped>

</style>

